<template>
  <KView class="shop-mall-goods">
    <KView class="shop-mall-goods-search">
      <search-input placeholder="输入宝贝名称" @click="toSearchPage"></search-input>
    </KView>
    <KView class="shop-mall-goods-content">
      <sys-loading v-if="loading" :size="50"></sys-loading>
      <KView v-if="isShow" class="shop-mall-goods-classify clearfix">
        <KView class="goods-classify-menu">
          <shop-goods-menu :shop-goods="shopGoods" :buy-record="buyGoodsRecord"></shop-goods-menu>
        </KView>
        <KView class="goods-classify-content">
          <shop-goods-list :shop-goods="shopGoods" :buy-record="buyGoodsRecord" @add-goods="addGoods" @goods-click="goodsClick"></shop-goods-list>
        </KView>
      </KView>
    </KView>

    <KView class="shop-mall-goods-balance" v-if="hasBalance">
      <shop-goods-balance :buy-record="buyGoodsRecord" @goods-balance="goodsBalance"></shop-goods-balance>
    </KView>

    <goods-model-dialog :visible.sync="openDialog" :goods.sync="selectGoods" :buy-record="buyGoodsRecord" type="preBuy" @buy-success="buySuccess"
      @close="dialogClose">
    </goods-model-dialog>
  </KView>
</template>

<script>
  import ShopMallApi from 'services/shopMallApi';

  import SystemUtil from 'utils/systemUtil';

  import SysLoading from 'common/sysLoading';
  import SearchInput from './searchInput';
  import ShopGoodsMenu from './shopGoodsMenu';
  import ShopGoodsList from './shopGoodsList';
  import GoodsModelDialog from './goodsModelDialog';
  import ShopGoodsBalance from './shopGoodsBalance';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],
    
    props: {
      params: {
        type: Object,
        required: true
      }
    },

    computed: {
      hasBalance() {
        let buyGoodsRecord = this.buyGoodsRecord;
        if (buyGoodsRecord === null) {
          return false;
        }
        return buyGoodsRecord.recordList.length > 0;
      }
    },

    data() {
      return {
        isShow: false,
        loading: false,
        isMiniprogram: process.env.isMiniprogram,
        shopGoods: null,
        selectGoods: null,
        buyGoodsRecord: null,
        openDialog: false
      };
    },

    created() {
      this.loading = true;
      window.Promise.all([
        this.setBuyGoodsRecord(),
        this.setShopGoods()
      ]).then(() => {
        this.loading = false;
        this.isShow = true
      }).catch(() => {
        this.loading = false;
      });
    },

    methods: {
      setShopGoods() {
        return ShopMallApi.getShopGoods(this.params).then(shopGoods => {
          this.shopGoods = shopGoods;
          return shopGoods;
        });
      },

      setBuyGoodsRecord() {
        return ShopMallApi.getBuyGoodsRecord(this.params).then(buyGoodsRecord => {
          this.buyGoodsRecord = buyGoodsRecord;
          return buyGoodsRecord;
        });
      },

      addGoods(goods) {
        this.selectGoods = goods;
        this.openDialog = true;
      },

      goodsClick(goods) {
        this.$emit('goods-click', goods);
      },

      toSearchPage() {
        let params = this.params;
        if (this.isMiniprogram) {
          let data = SystemUtil.formatFormParam(params);
          window.open(`/searchGoods?${data}`);
        }
      },

      buySuccess() {
        this.loading = true;
        this.setBuyGoodsRecord().then(() => {
          this.loading = false;
          this.isShow = true
        }).catch(() => {
          this.loading = false;
        });
      },

      dialogClose() {
        this.selectGoods = null;
      },

      goodsBalance() {
        let buyGoodsRecord = this.buyGoodsRecord;
        SystemUtil.showLoading('');
        ShopMallApi.toGoodsBalance(buyGoodsRecord, this.location.lnglat).then(orderId => {
          let url = `/paymentGoods/${orderId}?type=shopDetail`;
          if (this.isMiniprogram) {
            window.open(url);
          }
          return this.setBuyGoodsRecord().then(() => {
            SystemUtil.hideLoading();
          });
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      }
    },

    components: {
      SysLoading,
      SearchInput,
      ShopGoodsMenu,
      ShopGoodsList,
      GoodsModelDialog,
      ShopGoodsBalance
    }
  };

</script>

<style lang="scss">
  .shop-mall-goods {
    padding-top: formatPx(40);
    height: calc(100% - #{formatPx(40)});
    position: relative;

    .shop-mall-goods-search {
      padding: 0 formatPx(30);
    }

    .shop-mall-goods-content {
      margin-top: formatPx(40);
      height: calc(100% - #{formatPx(104)});
      position: relative;

      .shop-mall-goods-classify {
        height: 100%;

        >div {
          float: left;
          height: 100%;
        }

        .goods-classify-menu {
          width: formatPx(190);
        }

        .goods-classify-content {
          margin-left: formatPx(20);
          width: calc(100% - #{formatPx(210)});
          overflow: auto;
        }
      }
    }

    .shop-mall-goods-balance {
      position: absolute;
      left: formatPx(30);
      right: formatPx(30);
      bottom: 0;
      height: formatPx(98);
    }
  }

</style>
